<!DOCTYPE html>
<html>
<head>
    <#include "/layout/baseHeader.ftl" />
</head>
<body>
<div id="app">
    <i-form ref="myForm" :model="form" :label-width="80">
        <Form-item label="权限角色">
            <i-select v-model="form.arrRoleIds" multiple placeholder="请选择">
                <template v-for="i in roleData">
                    <i-option :value="i.id.toString()" :label="i.name+' '+i.key"></i-option>
                </template>
            </i-select>
        </Form-item>
    </i-form>
</div>

<script>
    const m_apis = {
        getRoleList(p_body) {
            return PB.apiRoute('/api/sys/role/getList', 'GET')
        },
        getRoleListForZhiCheng() {
            return PB.apiRoute('/api/sys/role/getListForZhiCheng', 'GET')
        },
        getModelEx(p_id) {
            return PB.apiRoute('/api/sys/userzj/getModelEx?id=' + p_id, 'GET')
        },
        updateRoles(p_body) {
            return PB.apiRoute('/api/sys/userzj/updateRoles', 'POST', p_body)
        }
    };
    let vm = new Vue({
        el: '#app',
        data() {
            return {
                apis: m_apis,
                roleData: [],
                form: {
                    arrRoleIds: []
                }
            }
        },
        created() {
            this.initData(function (that) {
                if (PB.getPara('id')) {
                    that.getModel(PB.getPara('id'));
                }
            });
        },
        methods: {
            initData(callbak) {
                let that = this;
                PB.showLoading();
                let loadRoles = new Promise(function (resolve, reject) {
                    let url = that.apis.getRoleList();
                    if (PB.getPara('type') == 'zhicheng') {
                        url = that.apis.getRoleListForZhiCheng();
                    }
                    PB.ajax(url, {
                        showLoading: false, myFail: function () {
                            reject();
                            PB.hideLoading();
                        }
                    }, function (d) {
                        that.roleData = d.data;
                        resolve();
                    });
                });

                Promise.all([loadRoles]).then(function (d) {
                    PB.hideLoading();
                    if (typeof callbak == 'function') {
                        callbak(that);
                    }
                })
            },
            getModel(id) {
                let that = this;
                PB.ajax(this.apis.getModelEx(id), function (d) {
                    that.form = d.data;
                    that.form.arrRoleIds = that.form.roleIds ? that.form.roleIds.split(',') : [];
                });
            },
            changeIsUse(status) {
                this.form.userEnable = status ? 1 : 0;
            },
            save() {
                //this.$refs['myForm'].validate((valid) => {
                //if (valid) {
                this.form.roleIds = this.form.arrRoleIds.length > 0 ? this.form.arrRoleIds.toString() : '';

                if (this.actionType == 'add') {
                    PB.alert('不支持添加同步用户')
                }
                else {
                    PB.ajax(this.apis.updateRoles(this.form), {isInFramePage: true}, function (d) {
                        PB.formPageSaveOK(d);
                    });
                }
                //} else {
                //    this.$Message.error('表单验证失败!');
                //    window.parent.formPageSaveError();
                //}
                //})


            }
        }
    });

    function save() {
        vm.save();
    }
</script>
</body>
</html>
